<template>
	<view class="meal_card" @click="clickmealCard()" >
		<view class="icon">
			<view class="">
				<image v-if="myInfo.ticket_type === 'normal'" src="@/static/images/meal/ordinary.png" mode=""></image>
				<image v-else-if="myInfo.ticket_type === 'self'" src="@/static/images/meal/self.png" mode=""></image>
				<image v-else-if="myInfo.ticket_type === 'table'" src="@/static/images/meal/table.png" mode=""></image>
			</view>
			<text  v-if="myInfo.ticket_type === 'normal'" :style="'color:#457AFF '">普通餐券</text>
			<text  v-else-if="myInfo.ticket_type === 'self'" :style="'color:#F4BE2D '">自助餐券</text>
			<text  v-else-if="myInfo.ticket_type === 'table'" :style="'color:#CA7BFF '">桌餐餐券</text>
		</view>
		<view class="">
			<view class="details">
				<text class="tag">用餐人数</text>
				<text>{{myInfo.person_count}}</text>
			</view>
			<view class="details">
				<text class="tag">就餐日期</text>
				<text v-if="myInfo.ticket_type === 'self'">{{myInfo.start_time | timeFormat('MM-DD')}} 至 {{myInfo.start_time | timeFormat('MM-DD')}}</text>
				<text v-else>{{myInfo.start_time | timeFormat('MM-DD')}} 至 {{myInfo.end_time | timeFormat('MM-DD')}}</text>
			</view>
			<view class="details">
				<text class="tag">申请时间</text>
				<text>{{myInfo.created_at | timeFormat('YYYY-MM-DD HH:mm')}}</text>
			</view>
		</view>
		<image class="state" v-if="myInfo.ticket_state === 'wait'" src="@/static/images/meal/stay.svg" mode=""></image>
		<image class="state" v-else-if="myInfo.ticket_state === 'passed'" src="@/static/images/meal/yes.svg" mode=""></image>
		<image class="state" v-else-if="myInfo.ticket_state === 'refused'" src="@/static/images/meal/no.svg" mode=""></image>
		<image class="state" v-else-if="myInfo.ticket_state === 'pending'" src="@/static/images/meal/underway.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		name: "MealCard",
		props: {
			myInfo: Object,
		},
		methods:{
			clickmealCard(){
				this.$emit('clickmealCard')
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.meal_card {
		display: flex;
		// justify-content: space-between;
		position: relative;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 20px 30rpx 10px 30rpx;
		margin-top: 5px;
	
		.icon {
			width: 120rpx;
			box-sizing: border-box;
			text-align: center;
			margin-right: 40rpx;
	
			image {
				width: 88rpx;
				height: 88rpx;
				margin-bottom: 20rpx;
			}
	
			text {
				font-size: 28rpx;
			}
		}
	
		.details {
			font-size: 28rpx;
			color: #394954;
			margin-bottom: 12px;
	
			.tag {
				margin-right: 30rpx;
				color: #999999;
			}
		}
	
		.state {
			position: absolute;
			top: 12px;
			right: 24rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>
